/**
 * 红树林生态监测数据可视化大屏 - 主仪表盘
 *
 * 功能概述：
 * • 集成9个生态监测数据可视化模块的综合性监控大屏
 * • 实时展示红树林生态环境多维度监测数据
 * • 提供从概览到详情的分级数据展示体系
 *
 * 可视化模块组成：
 * 1. 红树林在线实时监控 - 主视觉展示
 * 2. 实时监控数据仪表盘 - 8项关键生态指标
 * 3. 生态健康雷达图 - 5维度生态健康评估
 * 4. 生态足迹轨迹图 - 动态监测路径可视化
 * 5. 物候相机四宫格 - 多光谱影像实时展示
 * 6. 植被物候时序分析 - 8项植被指数变化趋势
 * 7. 生态监测热力图 - 多参数时空分布特征
 * 8. 环境因子趋势图 - 盐分温度长期变化
 * 9. 全国分布地图 - 红树林地理分布统计
 *
 * 数据特性：
 * • 实时数据更新（5秒间隔）
 * • 静态演示数据与动态API数据结合
 * • 多时间尺度数据展示（实时/日/月/年）
 *
 * 交互功能：
 * • 响应式布局适配多种屏幕尺寸
 * • 图表联动与钻取导航
 * • 模块化点击跳转详细分析页面
 */
$(function () {
    echart_1();
    echart_2();
    echart_3();
    echart_4();
    echart_map();
    echart_5();
    echart_6();
    echart_7();
    echart_8();

    //echart_1 红树林在线实时监控
    function echart_1() {
        var myChart = echarts.init(document.getElementById('chart_1'));

        var img = new Image();
        img.onload = function() {
            // 图片加载完成后再设置ECharts配置，确保图表初始化时图片已加载
            var option = {
                graphic: {
                    elements: [{
                        type: 'image',
                        style: {
                            image: img.src, // 直接使用已加载的图片路径
                            width: 300,
                            height: 200
                        },
                        left: 'center',
                        top: 'middle',
                        draggable: true,
                        onclick: function () {
                            console.log('Image clicked.');
                        }
                    }]
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
                option.graphic.elements[0].style.width = myChart.getWidth() * 0.8; // 动态调整图片宽度为容器宽度的80%
                option.graphic.elements[0].style.height = myChart.getHeight() * 0.8; // 动态调整图片高度为容器高度的80%
                myChart.setOption(option);
            });
        };
        img.src = 'img/Mangroves.png'; // 设置图片源路径
    }

    //echart_2 实时监控数据
    function echart_2() {
        var chartDom = document.getElementById('chart_2');
        var myChart = echarts.init(chartDom);

        var option = {
            title: [
                { text: 'Latitude', left: '11.5%', top: '28%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'Longitude', left: '37.5%', top: '28%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'Ux', left: '61.5%', top: '28%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'Uy', left: '86.5%', top: '28%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'CO2', left: '11.3%', top: '90%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'H2O', left: '36.5%', top: '90%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'Temp', left: '61.5%', top: '90%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } },
                { text: 'Batt_V', left: '86.5%', top: '90%', textAlign: 'center', textStyle: { color: '#FFFFFF', fontSize: 15, fontWeight: 'bold' } }
            ],
            graphic: [
                {
                    type: 'text',
                    left: 'center',
                    top: '15%',
                    style: {
                        text: 'Loading time...',
                        fill: '#ffffff',
                        font: '14px Arial'
                    },
                    z: 100
                }
            ],
            series: [
                {
                    type: 'gauge',
                    center: ['12.5%', '50%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: -90,
                    max: 90,
                    data: [{value: 0, name: 'Latitude'}]
                },
                {
                    type: 'gauge',
                    center: ['37.5%', '50%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: -180,
                    max: 180,
                    data: [{value: 0, name: 'Longitude'}]
                },
                {
                    type: 'gauge',
                    center: ['62.5%', '50%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: -10,
                    max: 10,
                    data: [{value: 0, name: 'Ux'}]
                },
                {
                    type: 'gauge',
                    center: ['87.5%', '50%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: -10,
                    max: 10,
                    data: [{value: 0, name: 'Uy'}]
                },
                {
                    type: 'gauge',
                    center: ['12.5%', '80%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: 0,
                    max: 1000,
                    data: [{value: 0, name: 'CO2 Density'}]
                },
                {
                    type: 'gauge',
                    center: ['37.5%', '80%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: 0,
                    max: 100,
                    data: [{value: 0, name: 'H2O Density'}]
                },
                {
                    type: 'gauge',
                    center: ['62.5%', '80%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: -50,
                    max: 50,
                    data: [{value: 0, name: 'Panel Temperature'}]
                },
                {
                    type: 'gauge',
                    center: ['87.5%', '80%'],
                    radius: '30%',
                    axisLine: { lineStyle: { width: 8 } },
                    axisLabel:{show:false},
                    title:{show:false},
                    detail: {
                        fontSize: 14,
                        color: '#FFFFFF',
                        fontWeight: 'bold',
                        formatter: '{value}'
                    },
                    min: 0,
                    max: 24,
                    data: [{value: 0, name: 'Battery Voltage'}]
                }
            ]
        };

        myChart.setOption(option);

        function updateTime() {
            var now = new Date();
            var formattedTime = now.toLocaleString(); // 默认包括日期和时间
            myChart.setOption({
                graphic: [{
                    type: 'text',
                    left: 'center',
                    top: '15%',
                    style: {
                        text: 'Current Time: ' + formattedTime,
                        fill: '#ffffff',
                        font: '14px Arial'
                    }
                }]
            });
        }

        setInterval(updateTime, 1000);

        function fetchData() {
            fetch('http://localhost:8088/getdata')
                .then(response => response.json())
                .then(data => {
                    myChart.setOption({
                        series: [
                            {data: [{value: data.latitude, name: 'Latitude'}]},
                            {data: [{value: data.longitude, name: 'Longitude'}]},
                            {data: [{value: data.Ux, name: 'Ux'}]},
                            {data: [{value: data.Uy, name: 'Uy'}]},
                            {data: [{value: data.CO2_density, name: 'CO2 Density'}]},
                            {data: [{value: data.H2O_density, name: 'H2O Density'}]},
                            {data: [{value: data.T_panel, name: 'Panel Temperature'}]},
                            {data: [{value: data.batt_volt, name: 'Battery Voltage'}]}
                        ]
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        setInterval(fetchData, 5000);
        fetchData();
    }

    function loadGeoJson() {
        var xhr = new XMLHttpRequest();
        //把 JSON 放到 Spring Boot 的 static 下，然后用 HTTP 打开 index.html(http://localhost:8088/index.html)
        xhr.open('GET', '/china.geo.json', false);
        xhr.send(null);
        if (xhr.status === 200) {
            return JSON.parse(xhr.responseText);
        } else {
            console.error('geoJson 加载失败');
            return null;
        }
    }

    // echart_map 城市红树林数量分布
    function echart_map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_map'));

        geoJson = loadGeoJson();

        echarts.registerMap('china', geoJson);

        var geoCoordMap = {
            '安徽省': [117.17, 31.52],
            '北京市': [116.40, 39.90],
            '重庆市': [106.55, 29.57],
            '福建省': [119.30, 26.08],
            '甘肃省': [103.73, 36.03],
            '广东省': [113.16, 23.08],
            '广西壮族自治区': [108.33, 22.84],
            '贵州省': [106.63, 26.65],
            '海南省': [110.35, 20.02],
            '河北省': [114.52, 38.05],
            '黑龙江省': [126.63, 45.75],
            '河南省': [113.65, 34.76],
            '湖北省': [114.34, 30.55],
            '湖南省': [112.93, 28.23],
            '江苏省': [118.46, 32.03],
            '江西省': [115.89, 28.68],
            '吉林省': [125.32, 43.90],
            '辽宁省': [123.43, 41.80],
            '内蒙古自治区': [111.75, 40.84],
            '宁夏回族自治区': [106.27, 38.47],
            '青海省': [101.78, 36.62],
            '山东省': [117.00, 36.65],
            '山西省': [112.53, 37.87],
            '陕西省': [108.95, 34.27],
            '上海市': [121.47, 31.23],
            '四川省': [104.06, 30.67],
            '天津市': [117.19, 39.12],
            '西藏自治区': [91.13, 29.65],
            '新疆维吾尔自治区': [87.68, 43.77],
            '云南省': [102.71, 25.04],
            '浙江省': [120.15, 29.28],
            '台湾省': [121.50, 25.03]
        };

        var data = [
            {name: '安徽省', value: Math.round(Math.random() * 10000)},
            {name: '北京市', value: Math.round(Math.random() * 10000)},
            {name: '重庆市', value: Math.round(Math.random() * 10000)},
            {name: '福建省', value: Math.round(Math.random() * 12000)+23000},
            {name: '甘肃省', value: Math.round(Math.random() * 8000)},
            {name: '广东省', value: Math.round(Math.random() * 15000)+30000},
            {name: '广西壮族自治区', value: Math.round(Math.random() * 13000)},
            {name: '贵州省', value: Math.round(Math.random() * 8000)},
            {name: '海南省', value: Math.round(Math.random() * 14000)+20000},
            {name: '河北省', value: Math.round(Math.random() * 10000)},
            {name: '黑龙江省', value: Math.round(Math.random() * 7000)},
            {name: '河南省', value: Math.round(Math.random() * 10000)},
            {name: '湖北省', value: Math.round(Math.random() * 10000)},
            {name: '湖南省', value: Math.round(Math.random() * 10000)},
            {name: '江苏省', value: Math.round(Math.random() * 10000)},
            {name: '江西省', value: Math.round(Math.random() * 10000)},
            {name: '吉林省', value: Math.round(Math.random() * 7000)},
            {name: '辽宁省', value: Math.round(Math.random() * 10000)},
            {name: '内蒙古自治区', value: Math.round(Math.random() * 7000)},
            {name: '宁夏回族自治区', value: Math.round(Math.random() * 7000)},
            {name: '青海省', value: Math.round(Math.random() * 6000)},
            {name: '山东省', value: Math.round(Math.random() * 12000)},
            {name: '山西省', value: Math.round(Math.random() * 8000)},
            {name: '陕西省', value: Math.round(Math.random() * 9000)},
            {name: '上海市', value: Math.round(Math.random() * 11000)},
            {name: '四川省', value: Math.round(Math.random() * 10000)},
            {name: '天津市', value: Math.round(Math.random() * 10000)},
            {name: '西藏自治区', value: Math.round(Math.random() * 5000)},
            {name: '新疆维吾尔自治区', value: Math.round(Math.random() * 6000)},
            {name: '云南省', value: Math.round(Math.random() * 8000)},
            {name: '浙江省', value: Math.round(Math.random() * 12000)},
            {name: '台湾省', value: Math.round(Math.random() * 10000)+20000}
        ];

        var max = 40000, min = 10;
        var maxSize4Pin = 100, minSize4Pin = 20;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        var option5 = {
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    if (typeof(params.value)[2] == "undefined") {
                        return params.name + ' : ' + params.value;
                    } else {
                        return params.name + ' : ' + params.value[2];
                    }
                }
            },
            visualMap: {
                show: true,
                min: 0,
                max: max,
                left: 'getdata',
                top: 'bottom',
                text: ['高', '低'],           // 文本，默认为数值文本
                calculable: true,
                color: ['#d94e5d','#eac736','#50a3ba'],
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                show: true,
                roam: true,
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#d94e5d'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#ffd2a0',
                        borderColor: '#404a59'
                    },
                    emphasis: {
                        areaColor: '#d94e5d'
                    }
                }
            },
            series: [
                {
                    name: '数据点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData(data),
                    symbolSize: function(val) {
                        return val[2] / 1000;
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            position: 'right',
                            show: true
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#d94e5d'
                        }
                    }
                },
                {
                    type: 'map',
                    map: 'china',
                    geoIndex: 0,
                    aspectScale: 0.75,  // 长宽比
                    showLegendSymbol: false, // 存在legend时显示
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            areaColor: '#ffd2a0',
                            borderColor: '#404a59'
                        },
                        emphasis: {
                            areaColor: '#d94e5d'
                        }
                    },
                    animation: false,
                    data: data
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option5);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    }

    //echart_3 风玫瑰（雷达图）
    function echart_3() {
        var chartDom = document.getElementById('chart_3');
        var myChart = echarts.init(chartDom);
        myChart.clear();

        var option106 = {
            title: {
                top: '10%',
                left: 'center',
                textStyle: {
                    fontSize: 12 // 调整为60%大小
                }
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                top: '15%',
                textStyle: {
                    fontSize: 10 // 调整为60%大小
                }
            },
            radar: [
                {
                    indicator: [
                        { text: '树木覆盖率（%）', max: 100 },
                        { text: '碳储量（吨/公顷）', max: 50 },
                        { text: '生物多样性（物种数）', max: 200 },
                        { text: '水文调节能力（分）', max: 100 },
                        { text: '土壤稳定性（分）', max: 100 }
                    ],
                    center: ['50%', '55%'], // 调整中心位置以适应较小的空间
                    radius: '55%', // 调整半径以缩小比例
                    startAngle: 90,
                    splitNumber: 4,
                    shape: 'circle',
                    axisName: {
                        formatter: '【{value}】',
                        color: '#428BD4',
                        fontSize: 10 // 调整字体大小
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
                            shadowColor: 'rgba(0, 0, 0, 0.2)',
                            shadowBlur: 10
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(211, 253, 250, 0.8)'
                        }
                    }
                }
            ],
            series: [
                {
                    type: 'radar',
                    data: [
                        {
                            value: [80, 30, 150, 90, 80],
                            areaStyle: {
                                color: '#ffffff' // 调整颜色
                            }
                        }
                    ]
                }
            ]
        };
        myChart.setOption(option106);
    }

    //echart_4 红树林足迹图
    function echart_4() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_4'));

        var option;

        var symbolSize = 10;
        var data = [
            [15, 0], [-50, 10], [-20, 20], [-70, 30], [-40, 40], // 第一段蜿蜒
            [-30, 50], [-80, 56], [-10, 70], [-90, 80], [-20, 90], // 第二段蜿蜒
            [-10, 100], [-100, 110], [0, 120], [-80, 130], [10, 140] // 第三段蜿蜒
        ];

        option = {
            tooltip: {
                triggerOn: 'none',
                formatter: function (params) {
                    return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[1].toFixed(2);
                }
            },
            grid: {
            },
            xAxis: {
                min: -130,
                max: 60,
                type: 'value',
                axisLine: {onZero: false},
                axisLabel: {
                    color: '#FFFFFF', // 设置x轴字体颜色为白色
                    fontSize: 14    // 设置x轴字体大小
                }
            },
            yAxis: {
                min: -10,
                max: 80,
                type: 'value',
                axisLine: {onZero: false},
                axisLabel: {
                    color: '#FFFFFF', // 设置x轴字体颜色为白色
                    fontSize: 14    // 设置x轴字体大小
                }
            },
            dataZoom: [
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'empty'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'empty'
                },
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'empty'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'empty'
                }
            ],
            series: [
                {
                    id: 'a',
                    type: 'line',
                    smooth: true,
                    symbolSize: symbolSize,
                    data: data
                }
            ]
        };

        myChart.setOption(option);


        setTimeout(function () {
            // Add shadow circles (which is not visible) to enable drag.
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        type: 'circle',
                        position: myChart.convertToPixel('grid', item),
                        shape: {
                            cx: 0,
                            cy: 0,
                            r: symbolSize / 2
                        },
                        invisible: true,
                        draggable: true,
                        ondrag: echarts.util.curry(onPointDragging, dataIndex),
                        onmousemove: echarts.util.curry(showTooltip, dataIndex),
                        onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                        z: 100
                    };
                })
            });
        }, 0);

        window.addEventListener('resize', updatePosition);

        myChart.on('dataZoom', updatePosition);

        function updatePosition() {
            myChart.setOption({
                graphic: echarts.util.map(data, function (item, dataIndex) {
                    return {
                        position: myChart.convertToPixel('grid', item)
                    };
                })
            });
        }

        function showTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: dataIndex
            });
        }

        function hideTooltip(dataIndex) {
            myChart.dispatchAction({
                type: 'hideTip'
            });
        }

        function onPointDragging(dataIndex, dx, dy) {
            data[dataIndex] = myChart.convertFromPixel('grid', this.position);

            // Update data
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }

    //echart_5 物候相机
    function echart_5() {
        var myChart = echarts.init(document.getElementById('chart_5'));

        var img = new Image();
        img.onload = function() {
            // 图片加载完成后再设置ECharts配置，确保图表初始化时图片已加载
            var option = {
                graphic: {
                    elements: [
                        {
                            type: 'image',
                            style: {
                                image: img.src, // 直接使用已加载的图片路径
                                width: 150,
                                height: 100
                            },
                            left: '9.8%',  // 左上角图片的位置
                            top: '12%',
                            draggable: true,
                            onclick: function () {
                                console.log('Image clicked.');
                            }
                        },
                        {
                            type: 'image',
                            style: {
                                image: img.src3,
                                width: 150,
                                height: 100
                            },
                            left: '50.5%',  // 右上角图片的位置
                            top: '12%',
                            draggable: true,
                            onclick: function () {
                                console.log('Image clicked.');
                            }
                        },
                        {
                            type: 'image',
                            style: {
                                image: img.src2,
                                width: 150,
                                height: 100
                            },
                            left: '9.8%',  // 左下角图片的位置
                            top: '48%',
                            draggable: true,
                            onclick: function () {
                                console.log('Image clicked.');
                            }
                        },
                        {
                            type: 'image',
                            style: {
                                image: img.src1,
                                width: 150,
                                height: 100
                            },
                            left: '50.5%',  // 右下角图片的位置
                            top: '48%',
                            draggable: true,
                            onclick: function () {
                                console.log('Image clicked.');
                            }
                        }
                    ]
                }
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
                // 根据窗口大小调整每张图片的大小
                option.graphic.elements.forEach(function(element) {
                    element.style.width = myChart.getWidth() * 0.35;
                    element.style.height = myChart.getHeight() * 0.35;
                });
                myChart.setOption(option);
            });
        };
        img.src = 'img/3330160_rgbnormal_PTZ000_2024_08_10_110028_533.jpeg'; // 设置图片源路径
        img.src1= 'img/3330160_rgbnormal_PTZ000_2024_08_12_110029_374.jpeg';
        img.src2= 'img/3330160_nirndvi_PTZ000_2024_08_11_130028_480.jpeg';
        img.src3= 'img/3330160_nirraw_PTZ000_2024_08_11_110028_342.jpeg';
    }


    //echart_6 植被物候（简易版），详细注释和完整的逻辑都在base.js中，这里的echart_6使用的是静态数据，后续可优化为和base.js中类似的逻辑
    function echart_6() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_6'));

        var xData_109 = function() {
            var data = [
                "2024/7/1", "2024/6/30", "2024/6/29", "2024/6/28", "2024/6/27",
                "2024/6/26", "2024/6/25", "2024/6/24", "2024/6/23", "2024/6/22",
                "2024/6/21", "2024/6/20", "2024/6/19", "2024/6/18", "2024/6/17",
                "2024/6/12",
                "2024/6/11", "2024/6/10", "2024/6/9", "2024/6/8", "2024/6/7"
            ];
            return data.reverse();
        }();

        //NDVI 平均值
        var _data_109_1 = [
            1.2804555,  // 2024/7/1
            1.7038058,  // 2024/6/30
            1.3687759,  // 2024/6/29
            1.2406875,  // 2024/6/28
            1.5665733,  // 2024/6/27
            1.4155825,  // 2024/6/26
            1.4506250,  // 2024/6/25
            1.5102041,  // 2024/6/24
            1.3254286,  // 2024/6/23
            1.6328571,  // 2024/6/22
            1.4012345,  // 2024/6/21
            1.4678456,  // 2024/6/20
            1.5890345,  // 2024/6/19
            1.4678456,  // 2024/6/18
            1.3789456,  // 2024/6/17
            1.2566456,  // 2024/6/12
            1.5678456,  // 2024/6/11
            1.4679456,  // 2024/6/10
            1.4789456,  // 2024/6/9
            1.3567456,  // 2024/6/8
            1.4679456   // 2024/6/7
        ].reverse();

        //ROI NDVI 平均值
        var _data_109_2 = [
            1.5068,  // 2024/7/1
            1.4642,  // 2024/6/30
            1.2777,  // 2024/6/29
            1.4451,  // 2024/6/28
            1.4822,  // 2024/6/27
            1.6391,  // 2024/6/26
            1.6410,  // 2024/6/25
            1.2382,  // 2024/6/24
            1.1937,  // 2024/6/23
            1.0287,  // 2024/6/22
            1.1184,  // 2024/6/21
            1.5360,  // 2024/6/20
            1.4180,  // 2024/6/19
            1.5540,  // 2024/6/18
            1.7731,  // 2024/6/17
            1.5704,  // 2024/6/12
            1.5195,  // 2024/6/11
            1.6418,  // 2024/6/10
            1.9395,  // 2024/6/9
            1.8171,  // 2024/6/8
            0.7201   // 2024/6/7
        ].reverse();

        //GCC 平均值
        var _data_109_3 = [
            0.3883,  // 2024/7/1
            0.3928,  // 2024/6/30
            0.3900,  // 2024/6/29
            0.3845,  // 2024/6/28
            0.3880,  // 2024/6/27
            0.3947,  // 2024/6/26
            0.3872,  // 2024/6/25
            0.3847,  // 2024/6/24
            0.3821,  // 2024/6/23
            0.3853,  // 2024/6/22
            0.3826,  // 2024/6/21
            0.3843,  // 2024/6/20
            0.3815,  // 2024/6/19
            0.3823,  // 2024/6/18
            0.3835,  // 2024/6/17
            0.3854,  // 2024/6/12
            0.3845,  // 2024/6/11
            0.3847,  // 2024/6/10
            0.3853,  // 2024/6/9
            0.3827,  // 2024/6/8
            0.4251   // 2024/6/7
        ].reverse();

        //GVI 平均值
        var _data_109_4 = [
            0.1061,  // 2024/7/1
            0.1060,  // 2024/6/30
            0.1059,  // 2024/6/29
            0.0915,  // 2024/6/28
            0.0925,  // 2024/6/27
            0.1058,  // 2024/6/26
            0.0990,  // 2024/6/25
            0.0985,  // 2024/6/24
            0.0933,  // 2024/6/23
            0.0897,  // 2024/6/22
            0.0875,  // 2024/6/21
            0.0967,  // 2024/6/20
            0.0931,  // 2024/6/19
            0.0925,  // 2024/6/18
            0.0987,  // 2024/6/17
            0.0976,  // 2024/6/12
            0.1003,  // 2024/6/11
            0.0971,  // 2024/6/10
            0.1034,  // 2024/6/9
            0.0945,  // 2024/6/8
            0.1570   // 2024/6/7
        ].reverse();

        //rcc 平均值
        var _data_109_5 = [
            0.3140,  // 2024/7/1 rcc 平均值
            0.3153,  // 2024/6/30 rcc 平均值
            0.3145,  // 2024/6/29 rcc 平均值
            0.3148,  // 2024/6/28 rcc 平均值
            0.3104,  // 2024/6/27 rcc 平均值
            0.3144,  // 2024/6/26 rcc 平均值
            0.3104,  // 2024/6/25 rcc 平均值
            0.3116,  // 2024/6/24 rcc 平均值
            0.3087,  // 2024/6/23 rcc 平均值
            0.3093,  // 2024/6/22 rcc 平均值
            0.3109,  // 2024/6/21 rcc 平均值
            0.3120,  // 2024/6/20 rcc 平均值
            0.3111,  // 2024/6/19 rcc 平均值
            0.3170,  // 2024/6/18 rcc 平均值
            0.3207,  // 2024/6/17 rcc 平均值
            0.3166,  // 2024/6/12 rcc 平均值
            0.3162,  // 2024/6/11 rcc 平均值
            0.3200,  // 2024/6/10 rcc 平均值
            0.3198,  // 2024/6/9 rcc 平均值
            0.3189,  // 2024/6/8 rcc 平均值
            0.3183   // 2024/6/7 rcc 平均值
        ].reverse();

        //bcc 平均值
        var _data_109_6 = [
            0.2990,  // 2024/7/1 bcc 平均值
            0.3002,  // 2024/6/30 bcc 平均值
            0.3007,  // 2024/6/29 bcc 平均值
            0.3005,  // 2024/6/28 bcc 平均值
            0.2993,  // 2024/6/27 bcc 平均值
            0.3026,  // 2024/6/26 bcc 平均值
            0.3021,  // 2024/6/25 bcc 平均值
            0.3033,  // 2024/6/24 bcc 平均值
            0.3050,  // 2024/6/23 bcc 平均值
            0.3058,  // 2024/6/22 bcc 平均值
            0.3081,  // 2024/6/21 bcc 平均值
            0.3097,  // 2024/6/20 bcc 平均值
            0.3120,  // 2024/6/19 bcc 平均值
            0.3132,  // 2024/6/18 bcc 平均值
            0.3184,  // 2024/6/17 bcc 平均值
            0.3125,  // 2024/6/12 bcc 平均值
            0.3117,  // 2024/6/11 bcc 平均值
            0.3134,  // 2024/6/10 bcc 平均值
            0.3125,  // 2024/6/9 bcc 平均值
            0.3118,  // 2024/6/8 bcc 平均值
            0.3104   // 2024/6/7 bcc 平均值
        ].reverse();

        //low_lai 平均值
        var _data_109_7 = [  //low_lai 平均值
            483.57,  // 2024/7/1
            557.741,  // 2024/6/30
            267.236,  // 2024/6/29
            415.712,  // 2024/6/28
            578.865,  // 2024/6/27
            1099.399,  // 2024/6/26
            500.572,  // 2024/6/25
            279.027,  // 2024/6/24
            170.118,  // 2024/6/23
            163.561,  // 2024/6/22
            84.431,  // 2024/6/21
            459.771,  // 2024/6/20
            205.065,  // 2024/6/19
            709.773,  // 2024/6/18
            564.073,  // 2024/6/17
            538.288,  // 2024/6/12
            903.360,  // 2024/6/11
            766.221,  // 2024/6/10
            883.516,  // 2024/6/9
            984.782,  // 2024/6/8
            328.521   // 2024/6/7
        ].reverse();

        //fvc 平均值
        var _data_109_8 = [  // fvc 平均值
            0.2086,  // 2024/7/1
            0.2301,  // 2024/6/30
            0.2411,  // 2024/6/29
            0.2511,  // 2024/6/28
            0.2630,  // 2024/6/27
            0.2585,  // 2024/6/26
            0.2471,  // 2024/6/25
            0.2353,  // 2024/6/24
            0.2274,  // 2024/6/23
            0.2241,  // 2024/6/22
            0.2218,  // 2024/6/21
            0.2207,  // 2024/6/20
            0.2187,  // 2024/6/19
            0.2166,  // 2024/6/18
            0.2139,  // 2024/6/17
            0.2077,  // 2024/6/12
            0.2065,  // 2024/6/11
            0.2054,  // 2024/6/10
            0.2043,  // 2024/6/9
            0.2032,  // 2024/6/8
            0.2021   // 2024/6/7
        ].reverse();


        option109 = {
            "title": {
                "text": "",
                "subtext": '',
                x: "4%",

                textStyle: {
                    color: '#fff',
                    fontSize: '22'
                },
                subtextStyle: {
                    color: '#90979c',
                    fontSize: '16',

                },
            },
            "tooltip": {
                "trigger": "axis",
                "axisPointer": {
                    "type": "shadow",
                    textStyle: {
                        color: "#fff"
                    }
                },
                formatter: function(params) {
                    var indexX =0;
                    for(var x=0;x<xData_109.length;x++){
                        if(params[0].name === xData_109[x]){
                            indexX = x;
                            break;
                        }
                    }
                    var sum = _data_109_1[indexX] + _data_109_2[indexX] + _data_109_3[indexX] + _data_109_4[indexX] + _data_109_5[indexX] + _data_109_6[indexX] + _data_109_7[indexX] + _data_109_8[indexX];

                    var displayString = '监测时间：' + params[0].name
                    for(var m =0;m<params.length;m++){
                        var itemString = '<br/>'+ params[m].marker + params[m].seriesName  + params[m].data;
                        displayString = displayString + itemString
                    }
                    return displayString
                }
            },
            "grid": {
                "borderWidth": 0,
                left:80,
                "bottom": 80,
                textStyle: {
                    color: "#fff"
                }
            },

            //配置可选项
            "legend": {
                x: '5%',
                top: '6%',
                textStyle: {
                    color: '#fff',
                    fontSize: '12',
                },
                "data": ["NDVI","ROI NDVI","GCC","GVI","RCC","BCC","LOW_LAI","FVC"]
            },
            "calculable": true,
            "xAxis": [{
                "type": "category",
                "axisLine": {
                    lineStyle: {
                        color: '#90979c'
                    }
                },
                "splitLine": {
                    "show": false
                },
                "axisTick": {
                    "show": false
                },
                "splitArea": {
                    "show": false
                },
                "axisLabel": {
                    textStyle: {
                        color: '#fff',
                        fontSize: '16',
                    },
                },
                "data": xData_109,
            }],
            "yAxis": [{
                "type": "value",
                "splitLine": {
                    "show": false
                },
                "axisLine": {
                    lineStyle: {
                        color: '#90979c'
                    }
                },
                "axisTick": {
                    "show": false
                },
                "axisLabel": {
                    "interval": 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: '16',
                    },
                },
                "splitArea": {
                    "show": false
                },

            }],
            "dataZoom": [{
                "show": true,
                "height": 10,
                "xAxisIndex": [
                    0
                ],
                bottom: 30,
                "start": 0,
                "end": 100,
                handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                handleSize: '110%',
                handleStyle: {
                    color: "#d3dee5",

                },
                textStyle: {
                    color: "#fff"
                },
                borderColor: "#90979c"
            }, {
                bottom:10,
                "type": "inside",
                "show": true,
                "height": 15,
                "start": 1,
                "end": 35
            }],
            "series": [
                {
                    "name": "NDVI",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "#CCFF66",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data": _data_109_1
                },
                {
                    "name": "ROI NDVI",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "barMaxWidth": 35,
                    "barGap": "10%",
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(0,191,183,1)",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data":_data_109_2
                },
                {
                    "name": "GCC",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(255,193,193,1)",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data": _data_109_3
                },
                {
                    "name": "GVI",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(186,85,211,1)",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data":  _data_109_4
                },
                {
                    "name": "RCC",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(255,193,193,1)",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data":_data_109_5
                },
                {
                    "name": "BCC",
                    "type": "line",
                    "stack": "总量",
                    // symbolSize: 10,
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(252,230,48,1)",
                            "barBorderRadius": 0,
                            "label": {
                                "show": false,
                                "position": "top",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data": _data_109_6
                },
                {
                    "name": "LOW_LAI",
                    "type": "line",
                    "stack": "总量",
                    symbol: 'circle',
                    "barMaxWidth": 35,
                    "barGap": "10%",
                    "itemStyle": {
                        "normal": {
                            "color": "rgba(255,185,15,1)",
                            "label": {
                                "show": false,
                                "textStyle": {
                                    "color": "#fff"
                                },
                                "position": "insideTop",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data": _data_109_7
                },
                {
                    "name": "FVC",
                    "type": "line",
                    "stack": "总量",
                    // symbolSize: 10,
                    symbol: 'circle',
                    "itemStyle": {
                        "normal": {
                            "color": "#F88",
                            "barBorderRadius": 0,
                            "label": {
                                "show": false,
                                "position": "top",
                                formatter: function(p) {
                                    return p.value > 0 ? (p.value) : '';
                                }
                            }
                        }
                    },
                    "data":_data_109_8
                },
            ]
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option109);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


    //echart_7 红树林扩展模块二
    function echart_7() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_7'));

        // 更新为红树林生态监测数据
        var months = ['2024年1月', '2024年2月', '2024年3月', '2024年4月', '2024年5月', '2024年6月', '2024年7月'];
        var monitoringTypes = ['气体交换', '土壤湿度', '光合活性', '红树种群密度', '水质指数', '碳储量'];
        var data = [];
        var valueCounter = 0;

        for (var i = 0; i < months.length; i++) {
            for (var j = 0; j < monitoringTypes.length; j++) {
                data.push([i, j, Math.round(Math.random() * 300)]);
            }
        }

        data = data.map(function (item) {
            return [item[0], item[1], item[2] || '-'];
        });

        option = {
            tooltip: {
                position: 'top',
                formatter: function(params) {
                    var value = params.data[2];
                    return monitoringTypes[params.value[1]] + ' in ' + months[params.value[0]] + ': ' + value;
                }
            },
            grid: {
                left: '1%',
                right: '20%',
                bottom: '15%',
                top: '13%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: months,
                axisLine: {
                    lineStyle: {
                        color: '#fff'  // 轴线颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'  // 更改x轴字体颜色为白色
                    }
                },
                splitArea: {
                    show: true
                }
            },
            yAxis: {
                type: 'category',
                data: monitoringTypes,
                axisLine: {
                    lineStyle: {
                        color: '#fff'  // 轴线颜色
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff'  // 更改x轴字体颜色为白色
                    }
                },
                splitArea: {
                    show: true
                }
            },
            visualMap: {
                min: 0,
                max: 300,
                calculable: true,
                orient: 'vertical', // 设置为垂直
                right: '2%', // 设置为右对齐，5%是距离右边的距离
                bottom: '10%',
                inverse: true, // 反转滑动手柄方向
                textStyle: {
                    color: '#fff' // 设置文字颜色为白色
                }
            },
            series: [{
                name: '红树林生态监测',
                type: 'heatmap',
                data: data,
                label: {
                    show: true
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


    //echart_8 红树林扩展模块三
    function echart_8() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart_8'));

        // 更新为红树林相关的数据，覆盖最近12个月
        var excelJson_11 = [
            {a: '2023年8月', b: '盐分浓度 (‰)', c: 32},
            {a: '2023年8月', b: '温度变化 (°C)', c: 32},
            {a: '2023年9月', b: '盐分浓度 (‰)', c: 33},
            {a: '2023年9月', b: '温度变化 (°C)', c: 30},
            {a: '2023年10月', b: '盐分浓度 (‰)', c: 34},
            {a: '2023年10月', b: '温度变化 (°C)', c: 27},
            {a: '2023年11月', b: '盐分浓度 (‰)', c: 33},
            {a: '2023年11月', b: '温度变化 (°C)', c: 25},
            {a: '2023年12月', b: '盐分浓度 (‰)', c: 32},
            {a: '2023年12月', b: '温度变化 (°C)', c: 26},
            {a: '2024年1月', b: '盐分浓度 (‰)', c: 31},
            {a: '2024年1月', b: '温度变化 (°C)', c: 25},
            {a: '2024年2月', b: '盐分浓度 (‰)', c: 30},
            {a: '2024年2月', b: '温度变化 (°C)', c: 26},
            {a: '2024年3月', b: '盐分浓度 (‰)', c: 29},
            {a: '2024年3月', b: '温度变化 (°C)', c: 25},
            {a: '2024年4月', b: '盐分浓度 (‰)', c: 28},
            {a: '2024年4月', b: '温度变化 (°C)', c: 27},
            {a: '2024年5月', b: '盐分浓度 (‰)', c: 27},
            {a: '2024年5月', b: '温度变化 (°C)', c: 29},
            {a: '2024年6月', b: '盐分浓度 (‰)', c: 26},
            {a: '2024年6月', b: '温度变化 (°C)', c: 30},
            {a: '2024年7月', b: '盐分浓度 (‰)', c: 25},
            {a: '2024年7月', b: '温度变化 (°C)', c: 33}
        ];

        var wei1 = [], wei2 = [];
        // 第一列：月份
        wei1.push(excelJson_11[0].a);
        for (var i = 1; i < excelJson_11.length; i++) {
            if (i > 0 && excelJson_11[i].a !== wei1[wei1.length - 1]) {
                wei1.push(excelJson_11[i].a);
            }
        }

        // 第二列：监测指标
        wei2.push(excelJson_11[0].b);
        for (var i = 1; i < excelJson_11.length; i++) {
            if (i > 0 && excelJson_11[i].b !== wei2[0]) {
                wei2.push(excelJson_11[i].b);
            } else {
                break;
            }
        }

        // 第二列的每个一列的值
        var value_2_1_11 = [];
        for (var x = 0; x < wei2.length; x++) {
            var value1 = [];
            var wei2index = wei2[x];
            for (var i = 0; i < excelJson_11.length; i++) {
                if (excelJson_11[i].b === wei2index) {
                    value1.push(excelJson_11[i].c);
                }
            }
            var item = {
                name: wei2index,
                value: value1
            };
            value_2_1_11.push(item);
        }

        var xData_11_ = wei1;
        var legendData_11 = wei2;

        // 第二列的每个一列的值 的图表配置
        var seriesData_11 = [];
        // 每一项的颜色配置
        var colorData_11 = ['rgb(253, 3, 62)', 'rgb(32, 15, 253)'];
        for (var i = 0; i < value_2_1_11.length; i++) {
            var item = {
                name: legendData_11[i],
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 9,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: colorData_11[i],
                        width: 3,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetX: 4,
                        shadowOffsetY: 10
                    }
                },
                data: value_2_1_11[i].value
            };
            seriesData_11.push(item);
        }
        console.log(seriesData_11);

        var option11 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                }
            },
            legend: {
                data: legendData_11,
                top: '10%',
                textStyle: {
                    color: '#fff'
                },
            },
            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    onZero: true
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    }
                },
                data: xData_11_
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    }
                },
            }],
            series: seriesData_11
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option11);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    //点击跳转
    $('#chart_map').click(function(){
        window.location.href = './page/index.html';
    });
    $('.t_btn2').click(function(){
        window.location.href = "./page/index.html?id=2";
    });
    $('.t_btn3').click(function(){
        window.location.href = "./page/index.html?id=3";
    });
    $('.t_btn4').click(function(){
        window.location.href = "./page/index.html?id=4";
    });
    $('.t_btn5').click(function(){
        window.location.href = "./page/index.html?id=5";
    });
    $('.t_btn6').click(function(){
        window.location.href = "./page/index.html?id=6";
    });
    $('.t_btn7').click(function(){
        window.location.href = "./page/index.html?id=7";
    });
    $('.t_btn8').click(function(){
        window.location.href = "./page/index.html?id=8";
    });
    $('.t_btn9').click(function(){
        window.location.href = "./page/index.html?id=9";
    });
});
